<!--批文计划-->
<div class="approval-plan">
    <el-form >
        <el-form-item label="" ></el-form-item>
    </el-form>
    <!--<input type="checkbox" id="panel-activer">-->
    <div class="panel-parent">
        <div class="side-panel">
            <div>

            </div>
        </div>
        <div class="self">
            <div class="consume-panel">
                <el-form :inline="true" ref="form" :model="form" label-position="left" label-width="100px">
                    <el-form-item label=""  prop="flightInfo.flightInfoId":rules
                            ="[ {required: false, message: '航班号不能为空'}]">
                        <el-select clearable  v-model="form.flightInfo.flightInfoId" filterable placeholder="航班号"   >
                            <el-option
                                    v-for="plane in planes"
                                    :key="plane.flightInfoId"
                                    :label="plane.flightNum"
                                    :value="plane.flightInfoId"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!--<el-form-item label="预约日期" >-->
                    <!--<el-date-picker-->
                    <!--v-model="form.startDate"-->
                    <!--type="daterange"-->
                    <!--align="right"-->
                    <!--unlink-panels-->
                    <!--value-format="yyyy-MM-dd"-->
                    <!--range-separator="至"-->
                    <!--start-placeholder="开始日期"-->
                    <!--end-placeholder="结束日期"-->
                    <!--:picker-options="pickerOptions2">-->
                    <!--</el-date-picker>-->
                    <!--</el-form-item>-->
                    <el-form-item label="安排日期" >

                        <el-date-picker
                                v-model="form.endDate"
                                type="daterange"
                                align="right"
                                unlink-panels
                                value-format="yyyy-MM-dd"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :picker-options="pickerOptions2">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label=""  class = "transparent">
                        <el-button type="primary" @click="queryAppointment">查询</el-button>
                    </el-form-item>
                    <el-form-item label=""  class = "transparent">
                        <el-button type="primary" @click="addPlane">新增</el-button>
                    </el-form-item>
                    <!--<el-form-item label=""  class = "transparent">-->
                        <!--<a href="/dam/临时航班计划导入模板.xlsx">excel模板下载</a>-->
                    <!--</el-form-item>-->
                    <!--<el-form-item label=""  class = "transparent">-->
                        <!--<el-button type="primary" @click="openExcel">excel导入</el-button>-->
                    <!--</el-form-item>-->
                </el-form>
            </div>
            <div class="consume-panel">
                <el-row style="margin-top: 10px;" type="flex"  justify="space-around">
                <el-col :span="9" >
                    <el-card  >
                        <div slot="header" class="clearfix">

                            <span >已收报文</span>
                            <el-badge :value="receivedMessage.unRead.length" :max="99" class="item" style="float: right;">
                                <el-button  type="info" style="padding: 3px 8px;"  icon="el-icon-message" @click="receivedUnReadMessage()"></el-button>
                            </el-badge>
                        </div>
                        <div class="scroll-body">
                            <div v-for="o in receivedMessage.read" :key="o" class="text item">
                                <div class="my-message-body">
                                    <el-row style="padding:1px;font-size: 12px;">
                                        {{o.time}}
                                    </el-row>
                                    <el-row class="my-message">
                                        {{o.message}}
                                    </el-row>
                                </div>
                            </div>
                        </div>
                    </el-card>
                </el-col>

                <el-col :span="9">
                    <el-card  >
                        <div slot="header" class="clearfix">

                            <span >已发报文</span>
                            <el-badge :value="sentMessages.unRead.length" :max="99" class="item" style="float: right;">
                                <div style="padding: 3px 8px;" type="warning" plain icon="el-icon-message" @click="sentUnReadMessage()" >

                                </div>
                            </el-badge>
                        </div>
                        <div class="scroll-body">
                            <div v-for="o in sentMessages.read" :key="o" class="text item" >
                                <div class="my-message-body">
                                    <el-row style="padding:1px;font-size: 12px;">
                                        {{o.time}}
                                    </el-row>
                                    <el-row  class="my-message">
                                        {{o.message}}
                                    </el-row>
                                </div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="5">
                    <el-card  >
                        <div slot="header" class="clearfix">
                            <span >报文查找</span>
                        </div>
                        <div class="no-scroll-body">
                            <el-form class="thin-item">
                                <el-form-item>
                                    <el-date-picker
                                            v-model="date1"
                                            type="date"
                                            placeholder="开始日期">
                                    </el-date-picker>
                                </el-form-item>
                                <el-form-item>
                                    <el-date-picker
                                            v-model="date2"
                                            type="date"
                                            placeholder="结束日期">
                                    </el-date-picker>
                                </el-form-item>
                                <el-row>
                                    <el-col :span="10">
                                        <el-form-item>
                                            <el-checkbox v-model="checked">发报</el-checkbox>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="10">
                                        <el-form-item>
                                            <el-button type="primary" @click="checkMessages">查找报文</el-button>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
            </div>
            <div class="consume-panel">
                <el-row  type="flex" justify="space-around">
                <el-col :span="12" style="margin-right: 5px">
                    <el-table :data="importData"  border  :page-size="10" ref="table" stripe height="380" >
                        <el-table-column  header-align="center" label="进港">
                            <el-table-column  type="expand" width="50px" label="详情">
                                <template scope="scope">
                                    <el-form label-position="left" inline class="thin-item">
                                        <el-row>
                                            <el-col :span="8">
                                                <el-form-item label="航班号：">
                                                    <span>{{ scope.row.flightInfo.flightNum }}</span>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="8">
                                                <el-form-item label="机型：">
                                                    <span>{{ scope.row.flightInfo.flightType }}</span>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="8">
                                                <el-form-item label="机号：">
                                                    <span>{{ scope.row.flightInfo.flightNo }}</span>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="8">
                                                <el-form-item label="安排时间：">
                                                    <span>{{ scope.row.estimatedTime }}</span>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="8">
                                                <el-form-item label="预起：">
                                                    <span>   {{scope.row.takeOffTime?scope.row.takeOffTime.substr(11,5):""}}</span>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="8">
                                                <el-form-item label="预落：">
                                                    <span>{{scope.row.arriveTime?scope.row.arriveTime.substr(11,5):""}}</span>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="8">
                                                <el-form-item label="出发地：">
                                                    <span>{{ scope.row.originating }}</span>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="8">
                                                <el-form-item label="目的地：">
                                                    <span>{{ scope.row.destination }}</span>
                                                </el-form-item>

                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="8">
                                                <el-form-item label="是否中转：">
                                                    <span>{{scope.row.appProperty=="中转联程"?"是":"否"}}</span>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                    </el-form>
                                </template>
                            </el-table-column>
                            <el-table-column prop="flightInfo.flightNum" label="航班号" min-width="70px">

                            </el-table-column>

                            <!--<el-table-column prop="flightInfo.normalAbnormality" label="性质" min-width="90px">-->
                            <!--</el-table-column>-->
                            <el-table-column prop="flightInfo.flightType" label="机型" min-width="70px">
                            </el-table-column>
                            <el-table-column prop="flightInfo.flightNo" label="机号" min-width="70px">
                            </el-table-column>
                            <el-table-column  label="安排时间" prop="estimatedTime" min-width="88px" ></el-table-column>
                            <!--<el-table-column  label="预起" min-width="58px">-->
                                <!--<template scope="scope">-->
                                <!--<span>-->
                                    <!--{{scope.row.takeOffTime?scope.row.takeOffTime.substr(11,5):""}}-->
                                <!--</span>-->
                                <!--</template>-->
                            <!--</el-table-column>-->
                            <el-table-column  label="预落" min-width="58px">
                                <template scope="scope">
                                <span>
                                    {{scope.row.arriveTime?scope.row.arriveTime.substr(11,5):""}}
                                </span>
                                </template>
                            </el-table-column>
                            <el-table-column  prop="originating" label="出发地" min-width="100px">
                            </el-table-column>
                            <el-table-column  label="中转" min-width="56px">
                                <template scope="scope">
                                <span>
                                    {{scope.row.appProperty=="中转联程"?"是":"否"}}
                                </span>
                                </template>
                            </el-table-column>

                            <!--<el-table-column prop="destination" label="目的地" min-width="114px">-->
                            <!--</el-table-column>-->

                        </el-table-column>
                        <el-table-column label="操作" fixed="right"  width="60px" >
                            <template scope="scope"  >
                                <!--<el-button v-if="!scope.row.flightPlane" type="text" @click="transformToFlightPlane(scope)" style="margin-left: -10px;margin-right: -10px;">生成计划</el-button>-->
                                <!--<el-button v-if="scope.row.flightPlane" type="text" @click="editFlightPlane(scope.row)" style="margin-right: -10px;">修改</el-button>-->
                                <el-button  type="text" @click="editFlightPlane(scope)" style="margin-right: -10px;">修改</el-button>
                            </template>
                        </el-table-column>

                    </el-table>
                </el-col>

                <el-col  :span="12" style="margin-left: 5px">
                    <el-table :data="exportData"  :page-size="20" ref="table2" stripe  border height="380" >
                        <el-table-column  header-align="center" label="出港">
                            <el-table-column  type="expand" label="详情" width="50px" >
                                <template scope="scope">
                                    <el-form label-position="left" inline class="thin-item">
                                        <el-row>
                                            <el-col :span="8">
                                                <el-form-item label="航班号：">
                                                    <span>{{ scope.row.flightInfo.flightNum }}</span>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="8">
                                                <el-form-item label="机型：">
                                                    <span>{{ scope.row.flightInfo.flightType }}</span>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="8">
                                                <el-form-item label="机号：">
                                                    <span>{{ scope.row.flightInfo.flightNo }}</span>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="8">
                                                <el-form-item label="安排时间：">
                                                    <span>{{ scope.row.estimatedTime }}</span>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="8">
                                                <el-form-item label="预起：">
                                                    <span>   {{scope.row.takeOffTime?scope.row.takeOffTime.substr(11,5):""}}</span>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="8">
                                                <el-form-item label="预落：">
                                                    <span>{{scope.row.arriveTime?scope.row.arriveTime.substr(11,5):""}}</span>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="8">
                                                <el-form-item label="出发地：">
                                                    <span>{{ scope.row.originating }}</span>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="8">
                                                <el-form-item label="目的地：">
                                                    <span>{{ scope.row.destination }}</span>
                                                </el-form-item>

                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="8">
                                                <el-form-item label="是否中转：">
                                                    <span>{{scope.row.appProperty=="中转联程"?"是":"否"}}</span>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                    </el-form>
                                </template>
                            </el-table-column>
                            <el-table-column prop="flightInfo.flightNum" label="航班号" min-width="70px">

                            </el-table-column>

                            <!--<el-table-column prop="flightInfo.normalAbnormality" label="性质" min-width="90px">-->
                            <!--</el-table-column>-->
                            <el-table-column prop="flightInfo.flightType" label="机型" min-width="70px">
                            </el-table-column>
                            <el-table-column prop="flightInfo.flightNo" label="机号" min-width="70px">
                            </el-table-column>
                            <el-table-column  label="安排时间" prop="estimatedTime" min-width="88px" ></el-table-column>
                            <el-table-column  label="预起" min-width="58px">
                                <template scope="scope">
                                <span>
                                    {{scope.row.takeOffTime?scope.row.takeOffTime.substr(11,5):""}}
                                </span>
                                </template>
                            </el-table-column>
                            <!--<el-table-column  label="预落" min-width="58px">-->
                                <!--<template scope="scope">-->
                                <!--<span>-->
                                    <!--{{scope.row.arriveTime?scope.row.arriveTime.substr(11,5):""}}-->
                                <!--</span>-->
                                <!--</template>-->
                            <!--</el-table-column>-->
                            <el-table-column prop="destination" label="目的地" min-width="100px">
                            </el-table-column>
                            <el-table-column  label="中转" min-width="56px">
                                <template scope="scope">
                                <span>
                                    {{scope.row.appProperty=="中转联程"?"是":"否"}}
                                </span>
                                </template>
                            </el-table-column>
                            <!--<el-table-column  prop="originating" label="出发地" min-width="114px">-->
                            <!--</el-table-column>-->


                        </el-table-column>
                        <el-table-column label="操作" fixed="right"  width="60px" >
                            <template scope="scope"  >
                                <!--<el-button v-if="!scope.row.flightPlane" type="text" @click="transformToFlightPlane(scope)" style="margin-left: -10px;margin-right: -10px;">生成计划</el-button>-->
                                <!--<el-button v-if="scope.row.flightPlane" type="text" @click="editFlightPlane(scope.row)" style="margin-right: -10px;">修改</el-button>-->
                                <el-button  type="text" @click="editFlightPlane(scope)" style="margin-right: -10px;">修改</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
            </div>
            <el-dialog
                    :title="title"
                    :visible.sync="flightPlaneEdit"
                    :width="diawidth"
            >
                <el-row v-if="flightPlaneEdit">
                    <enters :parentData="enterData" ref="enters"></enters>
                </el-row>

            </el-dialog>

            <el-dialog
                    title="临时航班计划修改"
                    :visible.sync="flightPlaneExcel"
                    :width="diawidth"

            >
                <el-row >
                    <excelEnter :parentData="excelEnterData" ref="enters"></excelEnter>
                </el-row>

            </el-dialog>


          <!--
            <el-dialog
                    :title="messageTitle"
                    :visible.sync="messageDialog"
                    width="40%"
                    >
                <div class="scroll-body" style="height: 250px;" v-if="!checked">
                    <div v-for="o in receivedMessage.read" :key="o" class="text item">
                        <el-row style="padding:1px;font-size: 12px;">
                            {{o.time}}
                        </el-row>
                        <el-row style="padding:1px">
                            {{o.message}}
                        </el-row>
                    </div>
                </div>
                <div class="scroll-body" style="height: 250px;" v-if="checked">
                    <div v-for="o in sentMessages.read" :key="o" class="text item">
                        <el-row style="padding:1px;font-size: 12px;">
                            {{o.time}}
                        </el-row>
                        <el-row style="padding:1px">
                            {{o.message}}
                        </el-row>
                    </div>
                </div>
            </el-dialog>-->
            <!--模态框-->
            <el-dialog
                    width="40%"
                    top="5%"
                    :title="messageTitle"
                    :visible.sync="messageDialog"
                    class="approvalPlan"
            >
                <div v-for="(data, index) in tabList" :key="index" :data="data">
                    <div class="my-message-body">
                        <el-row style="padding:1px">
                            {{data.time}}
                        </el-row>
                        <el-row class="my-message">
                            {{data.message}}
                        </el-row>
                    </div>
                </div>


                <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="closeNewMessage">关闭</el-button>
  </span>
            </el-dialog>





        </div>
    </div>

</div>


